import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button } from 'antd';
import {
  WeaLocaleProvider,
  WeaMoreButton,
  WeaDialog,
  WeaSearchGroup,
} from 'ecCom';
import { RenderForm } from '../util';
import { CONDITION } from './FolderCondition';

const getLabel = WeaLocaleProvider.getLabel;

@inject('settingStore', 'emailMenuStore')
@observer
class Edit extends Component {
  constructor(props) {
    super(props);
    this.prefixCls = 'email-setting-folder-edit';
    this.state = {
      saveLoading: false,
    };
  }

  getForm = (form, fields) => {
    const { isFormInit } = form;
    let group = [];
    isFormInit &&
      fields &&
      fields.map((c) => {
        let items = [];
        c.items.map((field) => {
          items.push({ com: RenderForm(form, field) });
        });
        group.push(
          <WeaSearchGroup
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaSearchGroup@aya5c3@FolderSearchGroup`}
            col={1}
            needTigger={true}
            showGroup={c.defaultshow}
            items={items}
          />,
        );
      });
    return group;
  };

  getData = (callback) => {
    const {
      settingStore: { folderStore },
    } = this.props;
    const { editForm, setStoreState } = folderStore;
    const condition = CONDITION().conditioninfo;
    editForm.initFormFields(condition);
    setStoreState({ editFields: condition });
    if (callback) callback();
  };

  onSubmit = (params) => {
    const {
      settingStore: { folderStore },
      onSubmit,
    } = this.props;
    const { operateUserMailFolder, editForm, isEdit, editId } = folderStore;
    const formParams = editForm.getFormParams();
    params = { ...formParams, ...params };
    isEdit && (params = { ...params, operation: 'edit', folderId: editId });
    this.setState({ saveLoading: true }, () => {
      try {
        operateUserMailFolder(params).then((res) => {
          if (onSubmit && typeof onSubmit === 'function') onSubmit(res);
          res.flag && this.onCancel();
          this.setState({ saveLoading: false });
        });
      } catch (e) {
        console && console.warn(e);
        this.setState({ saveLoading: false });
        this.onCancel();
      }
    });
  };

  onCancel = () => {
    const {
      settingStore: { folderStore },
      onCancel,
    } = this.props;
    const { editForm, setStoreState } = folderStore;
    setStoreState({ isEdit: false });
    editForm.resetForm();
    if (onCancel && typeof onCancel === 'function') onCancel();
  };

  onSave = () => {
    const {
      settingStore: { folderStore },
    } = this.props;
    folderStore.editSubmit(() => this.onSubmit({ operation: 'add' }));
  };

  render() {
    const {
      settingStore: { folderStore },
      visible,
      title,
    } = this.props;
    const { editForm, editFields } = folderStore;
    const buttons = [
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@4h9w4b@FolderSave`}
        type="primary"
        disabled={this.state.saveLoading}
        loading={this.state.saveLoading}
        onClick={this.onSave}
      >
        {getLabel(30986, '保存')}
      </Button>,
      <WeaMoreButton
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaMoreButton@j5m2vw@Foldermore`}
      />,
    ];
    return (
      <WeaDialog
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaDialog@kjiocv`}
        icon="icon-coms-email"
        iconBgcolor="#a0b0ba"
        title={title}
        style={{ width: 600, height: 85 }}
        className={this.prefixCls}
        visible={visible}
        onCancel={this.onCancel}
        buttons={buttons}
        hasScroll
      >
        {this.getForm(editForm, editFields)}
      </WeaDialog>
    );
  }
}

export default Edit;
